<template>
	<div class="yz" :class="{'theme--Black':CurrentTheme.name==='DarkMode'}">
		<!-- 下拉菜单 -->
		<DropDownPopup :isShow_H5_Mask.sync="isShow_H5_Mask" :isMask="true" @close="onClose" position="bottom">
			<view slot="content" class="contents">
				<app-headers></app-headers>
				<view class="header">
					<!-- <view class="close"><text class="cuIcon-close"></text></view> -->
					<view class="close" @click="onClose"><text class="cuIcon-close"></text></view>
				</view>
				<view class="body">
					<div style="width: 100% ;display: flex; justify-content: center;">
						<section class="list">
							<div class="list-item" v-for="(i, j) in list" :key="j" @click="onSel(i.name)">
								<div class="imgsbox"><img :src="i.icon" /></div>
								<label>{{ i.name }}</label>
							</div>
						</section>
					</div>
				</view>
			</view>
		</DropDownPopup>
	</div>
</template>
<script>
import AppHeaders from '../../common/components/AppHeader/index.vue';
import DropDownPopup from './DropDownPopup.vue';
export default {
	props: {
		isShow_UploadPopup: {
			type: Boolean,
			default: false
		}
	},
	name: '',
	watch: {
		isShow_UploadPopup() {
			this.isShow_H5_Mask = this.isShow_UploadPopup;
		}
	},
	components: { DropDownPopup, AppHeaders },
	data() {
		return {
			isShow_H5_Mask: false,
			list: [
				{ name: '扫一扫', icon: 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/home/scan.png' },
				{ name: '上传图片', icon: 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/home/UploadPictures.png' },
				{ name: '上传视频', icon: 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/home/UploadVideo.png' },
				{ name: '新建笔记', icon: 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/home/NewNotes.png' },
				{ name: '上传文档', icon: 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/home/UploadDoc.png' },
				{ name: '上传音乐', icon: 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/home/UploadAudio.png' },
				{ name: '文件夹管理', icon: 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/home/NewFolder.png' },
				{ name: '上传其他文件', icon: 'https://qdds666.oss-cn-hangzhou.aliyuncs.com/AYangPan/home/UploadOtherFiles.png' }
			]
		};
	},
	methods: {
		// 组件内部API
		onClose() {
			this.$emit('update:isShow_UploadPopup', false);
		},
		// 点击功能
		onSel(type) {
			if (type == '上传文档' || type == '上传其他文件' || type == '新建笔记') {
				this.$pub.Toast('功能开发中~');
				return;
			} else if (type == '扫一扫') {
				// #ifdef H5
				this.$pub.Toast('H5版本不支持扫描')
				// #endif
				// #ifdef APP-PLUS
				uni.scanCode({
					success: res => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.$pub.Toast('条码内容' + res.result);
					},
					fail(err) {
						this.$pub.Toast('您取消了扫码');
					}
				});
				// #endif
				return
			}
			this.$pub.naviTo(`/pages/other/UploadUrlManager/index?type=${type}`);
			// uni.showTabBar({animation:true})
			this.onClose();
		}
	}
};
</script>

<style lang="less" scoped>
@import url('../../static/css/cxy.less');
.contents {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	position: relative;
	.header {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		.close {
			box-sizing: border-box;
			font-size: 40rpx;
			color: gray;
			width: 100rpx;
			height: 100rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.body {
		position: absolute;
		bottom: 160rpx;
		// 内容
		.list {
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			height: 240px;
			.list-item {
				flex-basis: 25%;
				box-sizing: border-box;
				text-align: center;
				color: #6d6d6d;
				font-size: 14px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				border-radius: 10px;
				.imgsbox {
					height: 30px;
					width: 30px;
					background-color: #f5f5f5;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 12px;
					img {
						height: 30px;
						width: 30px;
					}
				}
			}
		}
	}
}
	// 主题
	.theme--Black{
		/deep/ .contents .header .close{
			color:#ffffff;
		}
		/deep/ .contents{
			background-color: #000000;
			color:#ffffff;
		}
		/deep/ .body .list .list-item{
			color:#ffffff;
		}
	}
</style>
